<template>
    <div>
        <a-form
            class="form c-b"
            :color="'primary'"
            :labelAlign="'right'"
            ref="form"
        >
            <h2>XXX后台管理系统 - 登录</h2>
            <hr />

            <a-form-item class="c-m-t-xl" :label="form.accountType.label">
                <a-input-select
                    v-model:value="form.accountType.value"
                    :rules="form.accountType.rules"
                    :items="form.accountType.items"
                ></a-input-select>
            </a-form-item>
            <a-form-item
                class="c-m-t-xl"
                :label="form.account.label"
                :tips="form.account.tips"
            >
                <a-input-string
                    v-model:value="form.account.value"
                    :rules="form.account.rules"
                ></a-input-string>
            </a-form-item>
            <a-form-item class="c-m-t-xl" :label="form.password.label">
                <a-input-password
                    v-model:value="form.password.value"
                    :rules="form.password.rules"
                ></a-input-password>
            </a-form-item>

            <div class="c-m-t-xl c-f-h c-f-p-end">
                <a-button @click="submit" :color="'primary'" :loading="loading"
                    >登录</a-button
                >
            </div>
        </a-form>
        <pre class="language-html"><code>{{ `<a-form
    class="form c-b"
    :color="'primary'"
    :labelAlign="'right'"
    ref="form"
>
    <h2>XXX后台管理系统 - 登录</h2>
    <hr />
    <a-form-item class="c-m-t-xl" :label="form.accountType.label">
        <a-input-select
            v-model:value="form.accountType.value"
            :rules="form.accountType.rules"
            :items="form.accountType.items"
        ></a-input-select>
    </a-form-item>
    <a-form-item
        class="c-m-t-xl"
        :label="form.account.label"
        :tips="form.account.tips"
    >
        <a-input-string
            v-model:value="form.account.value"
            :rules="form.account.rules"
        ></a-input-string>
    </a-form-item>
    <a-form-item class="c-m-t-xl" :label="form.password.label">
        <a-input-password
            v-model:value="form.password.value"
            :rules="form.password.rules"
        ></a-input-password>
    </a-form-item>
    <div class="c-m-t-m c-f-h c-f-p-end">
        <a-button @click="submit" :color="'primary'" :loading="loading"
            >登录</a-button>
    </div>
</a-form>` }}</code></pre>
        <pre
            class="language-javascript"
        ><code>{{`import utils from '../../common/utils'

export default {
    data() {
        return {
            form: {
                account: {
                    label: '账号',
                    value: null,
                    rules: [
                        { name: 'required', value: true },
                        { name: 'maxLength', value: 45 },
                    ],
                    tips: '不可为空哦',
                },
                password: {
                    label: '密码',
                    value: null,
                    rules: [
                        { name: 'required', value: true }
                    ],
                },
                accountType: {
                    label: '账号类型',
                    value: null,
                    rules: [
                        { name: 'required', value: true }
                    ],
                    items: [
                        { text: '邮箱', value: 0 },
                        { text: '手机号', value: 1 },
                    ]
                }
            },
            loading: false,
            labelWidth: 100,
        }
    },
    methods: {
        async submit() {
            this.loading = true
            let valid = await this.$refs.form.isValid()
            if (!valid) {
                this.loading = false
                alert('请先纠正表单错误')
                return
            }
            await utils.sleep(1000)
            alert('登录成功')
            this.loading = false
        }
    }
}`}}</code></pre>
        <div v-for="component in componentList" :key="component.name">
            <h4>{{ component.name }}</h4>
            <div
                v-for="type in component.typeList"
                :key="type.name"
                class="c-m-t-m"
            >
                <p>{{ type.name }}</p>
                <a-table
                    :headerList="type.headerList"
                    :dataList="type.dataList"
                ></a-table>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.form {
    width: 500px;
    padding: 50px;
    background-color: white;
}
</style>

<script>
import utils from '../../common/utils'

export default {
    data() {
        return {
            form: {
                account: {
                    label: '账号',
                    value: null,
                    rules: [
                        { name: 'required', value: true },
                        { name: 'maxLength', value: 45 },
                    ],
                    tips: '不可为空哦',
                },
                password: {
                    label: '密码',
                    value: null,
                    rules: [
                        { name: 'required', value: true },
                        { name: 'minLength', value: 3 },
                        { name: 'maxLength', value: 16 },
                    ],
                },
                accountType: {
                    label: '账号类型',
                    value: null,
                    rules: [
                        { name: 'required', value: true }
                    ],
                    items: [
                        { text: '邮箱', value: 0 },
                        { text: '手机号', value: 1 },
                    ]
                },
            },
            loading: false,
            labelWidth: 100,
            componentList: [
                {
                    name: 'AForm',
                    typeList: [
                        {
                            name: 'props',
                            headerList: [
                                { name: 'name', text: '名称' },
                                { name: 'remark', text: '说明' },
                                { name: 'type', text: '类型' },
                                { name: 'default', text: '默认值' },
                            ],
                            dataList: [
                                { name: 'color', remark: '主题色', type: 'default | primary | secondary | success | warning | error', default: 'default' },
                                { name: 'disabled', remark: '是否禁用', type: 'boolean', default: 'false' },
                                { name: 'size', remark: '尺寸', type: 'xs | s | m | l | xl', default: 'm' },
                                { name: 'sharp', remark: '是否尖角', type: 'boolean', default: 'false' },
                                { name: 'autoAlignLabel', remark: '是否自动对齐label，不需要手动指定labelWidth', type: 'boolean', default: 'true' },
                                { name: 'labelWidth', remark: 'label的宽度，autoAlignLabel为false时生效', type: 'number', default: 'null' },
                                { name: 'labelAlign', remark: 'label对齐方向', type: 'string', default: 'left | center | right' },
                                { name: 'labelPlain', remark: '是否使用朴素风格的label', type: 'boolean', default: 'false' },
                            ],
                        },
                        {
                            name: 'slots',
                            headerList: [
                                { name: 'name', text: '名称' },
                                { name: 'remark', text: '说明' },
                                { name: 'data', text: 'scope数据' },
                            ],
                            dataList: [
                                { name: 'default', remark: '包含的表单项', data: '{}' }
                            ],
                        },
                        {
                            name: 'methods',
                            headerList: [
                                { name: 'name', text: '名称' },
                                { name: 'remark', text: '说明' },
                            ],
                            dataList: [
                                { name: 'isValid', remark: '检查表单是否验证通过，异步方法' }
                            ],
                        },
                    ]
                },
                {
                    name: 'AFormItem',
                    typeList: [
                        {
                            name: 'props',
                            headerList: [
                                { name: 'name', text: '名称' },
                                { name: 'remark', text: '说明' },
                                { name: 'type', text: '类型' },
                                { name: 'default', text: '默认值' },
                            ],
                            dataList: [
                                { name: 'color', remark: '主题色', type: 'default | primary | secondary | success | warning | error', default: 'default' },
                                { name: 'disabled', remark: '是否禁用', type: 'boolean', default: 'false' },
                                { name: 'size', remark: '尺寸', type: 'xs | s | m | l | xl', default: 'm' },
                                { name: 'sharp', remark: '是否尖角', type: 'boolean', default: 'false' },
                                { name: 'label', remark: 'label字符串', type: 'string', default: 'null' },
                                { name: 'tips', remark: '依附于label的tooltip', type: 'string', default: 'null' },
                                { name: 'autoAlignLabel', remark: '是否自动对齐label，不需要手动指定labelWidth', type: 'boolean', default: 'true' },
                                { name: 'labelPlain', remark: '是否使用朴素风格的label', type: 'boolean', default: 'false' },
                                { name: 'withTipsFlag', remark: '是否为tooltip添加问号标志', type: 'boolean', default: 'true' },
                                { name: 'required', remark: '是否必填，如果指定值，将会以此值为准，而忽略输入组件rules内的required', type: 'boolean', default: 'null' },
                            ],
                        },
                        {
                            name: 'slots',
                            headerList: [
                                { name: 'name', text: '名称' },
                                { name: 'remark', text: '说明' },
                                { name: 'data', text: 'scope数据' },
                            ],
                            dataList: [
                                { name: 'default', remark: '输入组件，比如AInputString', data: '{}' }
                            ],
                        },
                    ]
                }
            ]
        }
    },
    methods: {
        async submit() {
            this.loading = true
            let valid = await this.$refs.form.isValid()
            if (!valid) {
                this.loading = false
                console.log('请先纠正表单错误')
                return
            }
            await utils.sleep(1000)
            alert('登录成功')
            this.loading = false
        },
    }
}
</script>